<template>
	<view class="alldiv">
		<u-navbar @rightClick="rightClick" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
				<u-avatar size="30" class="userAvatar"></u-avatar>
				<text class="infoNum">咨询消息（12）</text>
			</view>
		</u-navbar>

    <view class="conversation-container">
      <view class="conversation">
        <view v-for="(conversation, index) in conversations" :key="index" :class="{'customer-service': conversation.isCustomerService, 'my-message': !conversation.isCustomerService}">

          <view class="message">{{ conversation.message }}</view>
        </view>
      </view>
      <view class="input-container">
        <input v-model="newMessage" type="text" placeholder="请输入消息..." style="padding-top:15rpx" />
        <u-button @click="sendMessage" style="width: 200rpx;margin-bottom: ">发送</u-button>
      </view>
    </view>

  </view>
</template>


<script>
import {addMessage} from "../../http/customerService";
	export default {
		components: {},
		data() {
			return {
        receiverId: null,
        newMessage: '',
        messageData: {},
        "conversations": [
          {
            "speaker": "客服",
            "message": "您好！有什么可以帮助您的吗？",
            "isCustomerService": true
          },
          {
            "speaker": "我",
            "message": "请问最近有什么优惠活动吗？",
            "isCustomerService": false
          }
          // 其余对话省略...
        ]

			};
		},

    onLoad(options) {
      console.log(options.id)
      this.receiverId= options.id
    },


		methods: {

      //发送消息 senderId, receiverId, content
      sendMessage() {
        this.messageData.senderId = this.$store.state.user.information.userId
        this.messageData.receiverId = this.receiverId
        this.messageData.content = this.newMessage
        if (this.newMessage.trim() !== '') {
          this.conversations.push({
            speaker: "我",
            message: this.newMessage,
            isCustomerService: false
          });
          this.newMessage = ''; // 清空输入框
        }
        addMessage(this.messageData).then(res => {
          this.conversations.push({
            speaker: "客服",
            message: res.data.templateContent,
            isCustomerService: true
          });

        })

          },


			rightClick() {
				uni.navigateTo({
					url: '/pages/Messag/msg'
				})
			},
		},
	};
</script>
<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;
		background-color: rgba(255, 255, 255, 0.1);
		padding: 0 16px;
		box-sizing: border-box;

		.u-nav-slot {
			display: flex;
			.userAvatar {
				margin-left: 15px;
				margin-right: 10px;
			}
			.infoNum {
				line-height: 30px;
				color: rgba(56, 56, 56, 1);
			}
		}

	}
  .conversation {
    display: flex;
    flex-direction: column;
  }

  .conversation-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 修改为 flex-end 让内容向底部对齐 */
    height: 90vh; /* 设置容器高度为视窗高度的90% */
    margin-top: 100rpx;
    background-color: #FAFBFD;
    border: 1px solid #E5E5E5;
  }

  .input-container {
    display: flex;
    padding: 10px;
    margin-top: auto; /* 确保 input-container 排列在最底部 */
  }
  .conversation {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #FAFBFD;
    padding: 10px;

  }

  .customer-service {
    text-align: left;
    padding: 50rpx 0rpx 50rpx 50rpx;
    background-color: #FFFFFF;
    font-size: 30rpx;

  }

  .my-message {
    text-align: right;
    padding: 50rpx 0rpx 50rpx 50rpx;
    background-color: #FFFFFF;
    font-size: 30rpx;
  }

  .input-container {
    display: flex;
    padding: 10px;
  }

  input {
    flex-grow: 1;
    margin-right: 10px;
  }

  button {
    width: 60px;
  }
</style>
